//////////////
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");

const isProduction = process.env.NODE_ENV === "production";

const publicPath = isProduction ? "././" : "./";

const cdn = {
  dev: {
    css: [], // "httpn.bootcdn.net/ajax/libs/element-ui/2.15.5/theme-chalk/index.min.css"
    js: [], // "//cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"
  },
  build: {
    css: [
      "//cdn.bootcdn.net/ajax/libs/element-ui/2.15.5/theme-chalk/index.min.css",
    ],
    js: [
      "//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
      "//cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js",
      "//cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js",
      "//cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js",
      "//cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js",
      "//cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js",
      "//cdn.bootcdn.net/ajax/libs/vue-i18n/8.26.8/vue-i18n.min.js",
      "//cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.mini.min.js",
      "//cdn.bootcdn.net/ajax/libs/lodash.js/4.17.3/lodash.min.js",

      // "//cdn.staticfile.org/monaco-editor/0.30.1/min/vs/loader.min.js",
      // "//cdn.staticfile.org/monaco-editor/0.30.1/min/vs/editor/editor.main.js",
    ],
  },
};

const externals = {
  vue: "Vue",
  "vue-router": "VueRouter",
  vuex: "Vuex",
  axios: "axios",
  "element-ui": "ELEMENT",
  echarts: "echarts",
  "vue-i18n": "VueI18n",
  xlsx: "XLSX",
  lodash: "_",
  // "monaco-editor": "monaco",
  // xls: "XLS",
};

module.exports = {
  publicPath,
  assetsDir: `${publicPath}/static`,
  lintOnSave: !isProduction,
  productionSourceMap: false,
  outputDir: "dist",
  configureWebpack: (config) => {
    const plugins = [];

    if (isProduction) {
      /** uglify-code */
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去除注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log", "console.error", "console.warn"], // 移除打印
            },
          },
        })
      );
      /** server-gzip */
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          filename: "[path].gz[query]",
          test: /\.js$|\.json$|\.css/,
          threshold: 10000,
          minRatio: 0.8, // 最小的压缩率
          // deleteOriginalAssets: true, // 删除原来打包出来的内容
        })
      );
    }
    // 模块抽离
    config.optimization = {
      splitChunks: {
        // 分割代码块
        cacheGroups: {
          vendor: {
            //第三方库抽离
            chunks: "all",
            test: /node_modules/,
            name: "vendor",
            minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
            maxInitialRequests: 5,
            minSize: 0, //大于0个字节
            priority: 100, //权重
          },
          common: {
            //公用模块抽离
            chunks: "all",
            test: /[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0, //大于0个字节
            priority: 60,
          },
          styles: {
            //样式抽离
            name: "styles",
            test: /\.(sa|sc|c)ss$/,
            chunks: "all",
            enforce: true,
          },
          runtimeChunk: {
            name: "manifest",
          },
        },
      },
    };
    if (isProduction) {
      config.performance = {
        hints: "warning",
        //入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        //生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith(".js");
        },
      };
    }
    /** use-cdn */
    config.externals = isProduction ? externals : {};
    return {
      plugins,
    };
  },
  chainWebpack: (config) => {
    /** set-cdn-urls */
    config.plugin("html").tap((args) => {
      if (isProduction) {
        args[0].cdn = cdn.build;
      } else {
        args[0].cdn = cdn.dev;
      }
      return args;
    });
    /** 打包分析 */
    // config
    //   .plugin("webpack-bundle-analyzer")
    //   .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
  },
  devServer: {
    port: 8080,
    hot: true,
    open: true,
    proxy: {
      "/api": {
        changeOrigin: true,
        target: "http://localhost:4000",
        ws: false,
      },
    },
  },
};
